<template>
  <div>
    <page-tools :show-before="true">
      <!-- 前面内容 -->
      <template v-slot:before>有0条考勤尚未审批</template>
      <template v-slot:after>
        <el-button size="mini" type="danger">导入</el-button>
        <el-button size="mini" type="warning">提醒</el-button>
        <el-button size="mini" type="primary">设置</el-button>
        <el-button size="mini">历史归档</el-button>
        <el-button size="mini" type="primary">202103报表</el-button>
      </template>
    </page-tools>
    <!-- 选择框 -->
    <el-card>
      <el-form>
        <el-form-item label="部门 : ">
          <el-checkbox-group v-model="checkList" @change="depChange">
            <el-checkbox v-for="item in depts" :key="item.id" :label="item.name" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考勤状态 : ">
          <el-radio-group v-model="state" @change="stateChange">

            <el-radio v-for="item in stateList" :key="item.id" :label="item.id">
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 列表 -->
    <el-card>
      <el-table
        :data="staffList"
        border
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="180"
        />
        <el-table-column
          prop="departmentName"
          label="部门"
        />
        <el-table-column
          prop="mobile"
          label="手机"
        />
        <el-table-column
          v-for="(item,index) in days"
          :key="item.id"

          :label="`${month}/${item}`"
        >
          <template v-if="arr.indexOf(row.attendanceRecord[index].adtStatu) !== -1" slot-scope="{row}">

            {{ numToStr(row.attendanceRecord[index].adtStatu) }}
          </template>
        </el-table-column>

      </el-table>
      <div class="block" type="flex" align="middle" justify="center" style="height: 60px">

        <el-pagination
          layout="prev, pager, next"
          :total="list.length"
          hide-on-single-page
          :current-page="page"
          @current-change="change"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances' // 获取考勤数据
import { getDepartments } from '@/api/department'
import stateList from '@/api/constant/attendance'

export default {
  data() {
    return {
      checkList: [], // 部门被选中
      depts: [], // 部门列表
      state: '', // 考勤状态被选中
      stateList: stateList.holidayType, // 考勤状态列表
      staffLists: [], // 员工考勤列表
      staffList: [], // 当前渲染的考勤列表
      list: [], // 过滤后的列表
      monthList: [],
      month: '',
      days: '',
      pageMin: 0,
      pageMax: 10,

      page: 1,
      arr: [1, 2, 3, 4, 5, 6]
    }
  },
  async created() {
    this.getAttendancesListMock() // 获取考勤数据
    this.getDepartments() // 获取部门数据
  },
  methods: {
    async getAttendancesListMock() {
      const res = await getAttendancesListMock()

      this.staffLists = res
      this.list = this.staffLists
      this.staffList = this.list.slice(this.pageMin, this.pageMax)

      this.monthList = res[0].attendanceRecord
      this.month = this.monthList[0].day + '0'
      this.month = this.month.slice(4, 6) * 1// 月份
      this.days = this.monthList.length
      console.log(this.month)
    },
    async getDepartments() {
      const { depts } = await getDepartments()
      this.depts = depts.filter(item => Number(item.pid) !== -1)
    },
    numToStr(id) {
      const res = stateList.holidayType.find(item => Number(item.id) === id)
      return res.value
    },
    change(page) {
      if (page) {
        this.page = page
      }
      this.pageMin = (this.page - 1) * 10
      this.pageMax = this.page * 10
      this.staffList = this.list.slice(this.pageMin, this.pageMax)
    },
    stateChange(i) {
      console.log(i)
      this.arr = [Number(i)]
    },
    depChange(item) {
      // console.log(154, item)
      if (item.length === 0) {
        this.getAttendancesListMock()
        return
      }
      this.list = this.staffLists.filter(i => {
        return item.indexOf(i.departmentName) !== -1
      })
      // console.log(this.list)
      this.change(1)
    }
  }
}
</script>

<style scoped>
::v-deep .el-form{
  margin-left: 20px;
  color: #686768;
}
</style>
